<template>
  <div id="container">
    <h2 class="container-top">立即成为VIP</h2>
    <div class="container-box">
      <div class="box-top">
          <h3 class="title">{{books.title}}</h3>
          <a :href="books.link" class="more">查看更多</a>
      </div>
      <div class="item" v-for="(book,bid) in books.list" :key="bid">
          <a :href="book.url" class="item-img"><img :src="book.img"></a>
          <div class="item-info">
              <a :href="book.url">{{book.name}}</a>
              <p>{{book.time}}</p>
          </div>
          <button class="item-btn">进入</button>
      </div>
    </div>
    <div class="container-box">
      <div class="box-top">
          <h3 class="title">{{blogs.title}}</h3>
          <a :href="blogs.link" class="more">查看更多</a>
      </div>
      <div class="item" v-for="(blog,gid) in blogs.list" :key="gid">
          <a :href="blog.url" class="item-img"><img :src="blog.img"></a>
          <div class="item-info">
              <a :href="blog.url">{{blog.name}}</a>
              <p>{{blog.time}}</p>
          </div>
          <button class="item-btn">进入</button>
      </div>
    </div>
    <div class="container-box">
      <div class="box-top">
          <h3 class="title">{{videos.title}}</h3>
          <a :href="videos.link" class="more">查看更多</a>
      </div>
      <div class="item" v-for="(video,vid) in videos.list" :key="vid">
          <a :href="video.url" class="item-img"><img :src="video.img"></a>
          <div class="item-info">
              <a :href="video.url">{{video.name}}</a>
              <p>{{video.time}}</p>
          </div>
          <button class="item-btn">进入</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data:function(){
    return {
        books:{
            title:"精选手册",
            link:"",
            list:[
                {id:1,img:"img/l1-1.jpg",name:"java电子书",time:"2020-06-23 16:32:43",url:""},
                {id:2,img:"img/l1-2.jpg",name:"前端开发",time:"2020-06-23 16:32:54",url:""}
            ]
        },
        blogs:{
            title:"精选博客",
            link:"",
            list:[
                {id:1,img:"img/l2-1.jpg",name:"学习编程的五大误区你占了几点",time:"2020-06-15 18:20:46",url:""},
                {id:2,img:"img/l2-2.jpg",name:"项目开发中你是怎么使用Git的",time:"2020-06-15 18:25:34",url:""},
                {id:3,img:"img/l2-3.jpg",name:"方向错了努力只会离目标越来越远",time:"2020-06-15 18:31:04",url:""}
            ]
        },
        videos:{
            title:"精选视频",
            link:"",
            list:[
                {id:1,img:"img/l3-1.jpg",name:"JavaScript入门",time:"2020-06-09 23:26:40",url:""},
                {id:2,img:"img/l3-2.jpg",name:"网页重构",time:"2020-06-10 00:04:46",url:""},
                {id:3,img:"img/l3-3.jpg",name:"Vue基础教程",time:"2020-06-10 00:13:22",url:""}
            ]
        }
    }
  },
  mounted(){

  },
  methods:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .container-top{
        width:90%;
        height:30px;
        margin:5px auto;
        border:0;
        border-radius:8px;
        background-color: #f3e2b8;
        color:#997f4c;
        font-size: 14px;
        line-height:30px;
        text-align: right;
        box-sizing: border-box;
        padding-right:10px;
    }
    .container-box{
        width:90%;
        margin:10px auto;
        border-radius:4px;
        margin:10px auto;
        padding:20px 0;
    }
    .box-top{
        width: 100%;
        height:40px;
        padding:0;
        display: flex;
        justify-content:space-between;
        align-items: center;
    }
    .box-top h3{
        width: 80px;
        flex:0 0 auto;
    }
    .box-top a{
        width: 80px;
        flex:0 0 auto;
        text-decoration: none;
        color:#bdbdbd;
    }
    .item{
        width: 100%;
        height:70px;
        margin:10px auto;
        display:flex;
        justify-content: space-between;
        align-items: center;
    }
    .item-img{
        width: 105px;
        height:70px;
        flex:0 1 auto;
    }
    .item-img img{
        width: 105px;
        height: 70px;
    }
    .item-info{
        width: 180px;
        height:70px;
        flex:0 1 auto;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
    }
    .item-info a{
        color:#666;
        text-decoration: none;
    }
    .item-info p{
        color:#adadad;
    }
    .item-btn{
        font-size:14px;
        padding:5px 15px;
        background-color:#fff;
        color:#00ccff;
        border:0;
        border-radius: 6px;
    }
</style>